<template>
	<div class="home-page">
		<header>
			<!-- 顶部横幅 -->
			<div class="banner">
				<div class="banner-bg"></div>
				<div class="banner-content">
					<div class="banner-title">平台赋能 / 数字转型 / 生态重构</div>
					<div class="banner-subtitle">
						ANNUAL SUMMIT OF DIGITAL ARCHITECTURE IN CHINA
					</div>
					<div class="banner-year">2019中国数字建筑年度峰会</div>
				</div>
			</div>
			<!-- 导航栏 -->
			<div class="nav">
				<div class="nav-content">
					<div class="logo">LOGO</div>
					<div class="nav-title">标题</div>
					<ul class="nav-menu">
						<li>首页</li>
						<li>期刊简介</li>
						<li>期刊荣誉</li>
						<li>编委会</li>
						<li>编辑部</li>
						<li>学术不端检测</li>
						<li>开放获取</li>
						<li>期刊订阅</li>
						<li>联系我们</li>
					</ul>
				</div>
			</div>
		</header>
		<!-- 主体内容 -->
		<div class="main">
			<!-- 左侧 -->
			<div class="main-top">
				<div class="main-l-top">
					<div class="main-img">
						<img src="../assets/img/bg1.png" alt="主图" />
					</div>
					<div class="expert-article">
						<div class="expert-tabs">
							<div class="title">专家文章</div>
							<div>
								<span class="active">推介文章</span>
								<span>专家文章</span>
							</div>
						</div>
						<ul>
							<li>多维数据驱动的系统动态性能优化与控制策略研究</li>
							<li>基于集成学习的智能制造质量预测方法</li>
							<li>新型建造模式的应用及其前景展望</li>
							<li>工业机器人视觉系统的优化设计</li>
							<li>基于深度学习的智能制造流程建模方法</li>
							<li>多维数据驱动的系统动态性能优化与控制策略研究</li>
							<li>多维数据驱动的系统动态性能优化与控制策略研究</li>
						</ul>
					</div>
					<div class="user-center">
						<div class="user-title">用户中心</div>
						<button>
							<router-link to="/">作者登录</router-link>
						</button>
						<button>审稿登录</button>
						<button>编辑登录</button>
						<button>读者登录</button>
					</div>
				</div>
			</div>
			<!-- 右侧 -->
			<div class="main-bot">
				<div class="main-l-bot">
					<div class="journal-list">
						<div class="journal-tabs">
							<span class="active">当前期刊</span>
							<span>过刊浏览</span>
							<span>下载排行</span>
							<span>总目次</span>
						</div>
						<div class="journal-search">
							<input type="text" placeholder="快速检索" />
							<button class="search-btn">高级检索</button>
							<button class="search-btn2">过刊检索</button>
						</div>
						<div style="
                display: flex;
                align-items: center;
                justify-content: space-between;
              ">
							<div>
								<select style="padding: 10px; margin-right: 10px">
									<option>2025年</option>
								</select>
								<select style="padding: 10px">
									<option>1月</option>
								</select>
							</div>
							<div>
								<button class="all-btn" style="margin-right: 10px">全选</button>
								<button class="export-btn">导出</button>
							</div>
						</div>
						<ul class="journal-articles">
							<li>
								<div class="article-info" v-for="(item, index) in 4" :key="index">
									<div style="display: flex; align-items: center">
										<input type="checkbox" />
										<div class="article-title">
											高速精雕主轴转轴驱动力学研究进展
										</div>
									</div>

									<div class="article-meta">
										作者：李某 | 2025,46(2):21-28 |
										DOI:10.16640/j.cnki.issn.1004-6801.2025.01.001
									</div>
									<div class="article-links">
										<a href="#">[摘要]</a>
										<a href="#">[HTML]</a>
										<a href="#">[PDF 5.3M]</a>
									</div>
								</div>
							</li>
							<!-- 可继续添加更多条目 -->
						</ul>
					</div>
					<div class="bot-down">
						<div class="download-area">
							<div style="
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                ">
								<div class="area-title">下载专区</div>
								<div class="area-title2">更多》</div>
							</div>
							<ul>
								<li>作者投稿指南.pdf <span>2.5MB</span></li>
								<li>参考文献要求.doc <span>1.8MB</span></li>
								<li>版权转让协议.pdf <span>1.2MB</span></li>
								<li>参考文献要求.doc <span>1.8MB</span></li>
								<li>版权转让协议.pdf <span>1.2MB</span></li>
							</ul>
						</div>
						<div class="num-publish">
							<div class="digital-platform">
								<div style="
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                  ">
									<div class="area-title">数字出版平台</div>
									<div class="area-title2">更多》</div>
								</div>
								<div class="platform-logos">
									<div class="platform-logo"></div>
									<div class="platform-logo"></div>
									<div class="platform-logo"></div>
									<div class="platform-logo"></div>
								</div>
							</div>
						</div>
					</div>
					<div class="bot-contributen">
						<div class="submit-guide">
							<div style="
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                ">
								<div class="area-title">投稿指南</div>
								<div class="area-title2">更多》</div>
							</div>
							<ul>
								<li>投稿启事</li>
								<li>论文模板下载</li>
								<li>在线投稿流程</li>
							</ul>
						</div>
						<div class="journal-news">
							<div style="
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                ">
								<div class="area-title">期刊新闻</div>
								<div class="area-title2">更多》</div>
							</div>
							<div class="news">
								<div style="
                    display: flex;
                    align-items: center;
                    margin-bottom: 10px;
                  ">
									<div class="date">06-25</div>
									<div style="text-align: left">本刊获得2025年度优秀期刊</div>
								</div>
								<div style="
                    display: flex;
                    align-items: center;
                    margin-bottom: 10px;
                  ">
									<div class="date">06-20</div>
									<div style="text-align: left">2025年度学会年会会议议则</div>
								</div>
								<div style="
                    display: flex;
                    align-items: center;
                    margin-bottom: 10px;
                  ">
									<div class="date">06-15</div>
									<div style="text-align: left">本刊开展征稿论文评选</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 底部 -->
		<div class="footer">
			您是第 384,903 位访客<br />
			机械工程学报 © 2025 版权所有<br />
			技术支持：某某科技有限公司
		</div>
	</div>
</template>

<style scoped>
	@import url('../style.css');

	* {
		margin: 0;
		padding: 0;
	}

	.main {
		display: flex;
		flex-direction: column;
		width: 1200px;
		margin: 24px auto 0 auto;
		display: flex;
		gap: 24px;
	}

	.main-top {
		display: flex;
		flex-direction: column;
		gap: 18px;
	}

	.main-left {
		display: flex;
		flex-direction: column;
		gap: 18px;
	}

	.main-l-top {
		display: flex;
	}

	.main-l-bot {
		display: flex;
	}

	.main-img img {
		width: 485px;
		height: 384px;
		object-fit: cover;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(44, 62, 80, 0.08);
	}

	.expert-article {
		background: #fff;
		border-radius: 8px;
		margin: 0 24px;
		padding: 18px 20px 10px 20px;
		box-shadow: 0 2px 8px rgba(44, 62, 80, 0.06);
	}

	.expert-tabs {
		display: flex;
		gap: 18px;
		margin-bottom: 10px;
		justify-content: space-between;
	}

	.title {
		font-size: 20px;
		font-weight: bold;
	}

	.expert-tabs span {
		font-size: 15px;
		color: #888;
		cursor: pointer;
		padding: 6px 12px;
		border-radius: 4px;
	}

	.expert-tabs .active {
		background: #2a3b8f;
		color: #fff;
	}

	.expert-article ul {
		margin: 0;
		padding-left: 18px;
		font-size: 15px;
		color: #222;
	}

	.expert-article li {
		margin-bottom: 6px;
		line-height: 1.7;
		text-align: left;
		border-bottom: 1px solid #ccc;
		margin-bottom: 10px;
		padding-bottom: 10px;
	}

	.journal-list {
		background: #fff;
		border-radius: 8px;
		padding: 18px 20px 10px 20px;
		box-shadow: 0 2px 8px rgba(44, 62, 80, 0.06);
	}

	.journal-tabs {
		display: flex;
		gap: 18px;
		margin-bottom: 10px;
	}

	.journal-tabs span {
		font-size: 15px;
		color: #888;
		cursor: pointer;
		padding: 2px 12px;
		border-radius: 4px;
	}

	.journal-tabs .active {
		background: #2a3b8f;
		color: #fff;
	}

	.journal-search {
		display: flex;
		align-items: center;
		gap: 8px;
		margin-bottom: 10px;
	}

	.journal-search input {
		width: 180px;
		height: 28px;
		border: 1px solid #d0d0d0;
		border-radius: 4px;
		padding: 0 8px;
		font-size: 14px;
	}

	.journal-search select {
		height: 28px;
		border: 1px solid #d0d0d0;
		border-radius: 4px;
		font-size: 14px;
		padding: 0 6px;
	}

	.journal-search button {
		height: 28px;
		border: none;
		border-radius: 4px;
		background: #2a3b8f;
		color: #fff;
		font-size: 14px;
		padding: 0 12px;
		cursor: pointer;
		margin-right: 2px;
	}

	.search-btn2 {
		color: black !important;
		background-color: #f9f9f9 !important;
	}

	.journal-search .all-btn,
	.journal-search .export-btn {
		background: #e0e0e0;
		color: #333;
	}

	.export-btn {
		background: #2a3b8f !important;
		color: #fff;
	}

	.journal-articles {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.journal-articles li {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		border-bottom: 1px solid #f0f0f0;
		padding: 10px 0;
		gap: 8px;
	}

	.article-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: start;
	}

	.article-title {
		font-weight: bold;
		font-size: 15px;
		color: #222;
		margin-left: 10px;
	}

	.article-meta {
		font-size: 13px;
		color: #888;
		margin: 2px 0 4px 0;
	}

	.article-links a {
		color: #2a3b8f;
		font-size: 13px;
		margin-right: 8px;
		text-decoration: none;
	}

	.main-right {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 18px;
	}

	.bot-down {
		margin: 0 24px;
		display: flex;
		flex-direction: column;
	}

	.bot-down li {
		padding: 10px;
		background: #f9f9f9;
		border-radius: 8px;
	}

	.download-area {
		width: 260px;
		height: 288px;
		background: #fff;
		border-radius: 8px;
		margin-bottom: 24px;
		padding: 18px 20px 10px 20px;
	}

	.num-publish {
		background: #fff;
		border-radius: 8px;
		width: 260px;
		height: 215px;
		padding: 18px 20px 10px 20px;
		box-shadow: 0 2px 8px rgba(44, 62, 80, 0.06);
	}

	.bot-contributen {
		/* margin: 0 24px; */
		display: flex;
		flex-direction: column;
	}

	.submit-guide {
		background: #fff;
		border-radius: 8px;
		margin-bottom: 24px;
		width: 260px;
		height: 180px;
		padding: 18px 20px 10px 20px;
		box-shadow: 0 2px 8px rgba(44, 62, 80, 0.06);
	}

	.journal-news {
		background: #fff;
		border-radius: 8px;
		width: 260px;
		height: 324px;
		padding: 18px 20px 10px 20px;
		box-shadow: 0 2px 8px rgba(44, 62, 80, 0.06);
	}

	.user-center {
		width: 230px;
		background-color: #3a57b6;
	}

	.user-center,
	.journal-news,
	.digital-platform {
		/* background: #fff; */
		border-radius: 8px;
		padding: 18px 20px 10px 20px;
		box-shadow: 0 2px 8px rgba(44, 62, 80, 0.06);
	}

	.user-title {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 30px;
		color: #fff;
	}

	.area-title {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 20px;
	}

	.area-title2 {
		font-size: 12px;
		margin-bottom: 20px;
		color: #3a57b6;
	}

	.user-center button {
		width: 100%;
		margin-bottom: 20px;
		height: 50px;
		background: linear-gradient(46deg,
				rgba(255, 255, 255, 0.2) 0%,
				rgba(255, 255, 255, 0.64) 100%);
		color: #fff;
		border: none;
		border-radius: 4px;
		font-size: 15px;
		cursor: pointer;
		transition: background 0.2s;
	}

	.user-center button:hover {
		background: #2a3b8f;
	}

	.download-area ul,
	.submit-guide ul,
	.journal-news ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.download-area li,
	.submit-guide li,
	.journal-news li {
		font-size: 14px;
		color: #222;
		margin-bottom: 8px;
		display: flex;
		justify-content: space-between;
	}

	.download-area span {
		color: #888;
		font-size: 13px;
	}

	.journal-news .date {
		color: #2a3b8f;
		font-weight: bold;
		margin-right: 6px;
		background: rgba(58, 87, 182, 0.1);
		border-radius: 4px;
		padding: 10px 2px;
	}

	.digital-platform .platform-logos {
		display: flex;
		gap: 10px;
		margin-top: 8px;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.platform-logo {
		width: 100px;
		height: 60px;
		background: #e0e0e0;
		border-radius: 6px;
	}

	.footer {
		width: 100%;
		background: #3e5eb9;
		font-size: 14px;
		color: rgba(255, 255, 255, 0.6);
		text-align: center;
		padding: 18px 0 10px 0;
		margin-top: 24px;
		letter-spacing: 1px;
	}

	.news {
		display: flex;
		flex-direction: column;
	}
</style>